<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>客户管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="stylesheet" href="/resources/css/public.css" media="all">
   <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
   <script src="/resources/layui/layui.js"></script>
    <script src="/resources/js/jquery-1.11.0.min.js"></script>
    <style>
        .pic_border_orange{
            /*橙色*/
            border-radius: 18px;
            border: 2px solid orange;
            box-shadow: 0 0 10px 3px orange;
            height: 150px;
            width: 150px;
        }
    </style>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div class="layui-header">
        <div class="layui-logo">BOOT客户管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="/resources/images/zqj.jpg" class="layui-nav-img">
<!--                    ${USER_SESSION.user_name}-->
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="#">基本资料</a></dd>
                    <dd><a href="#">安全设置</a></dd>
                    <dd><a href="#">中/英</a></dd>
                    <dd><a href="/page/logout.do">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/page/logout.do">退出登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="user-photo">
            <a class="img" title="我的头像">
                <img src="/resources/images/zqj.jpg" class="pic_border_orange">
            </a>
            <div style="width: 30px;height: 30px"></div>
            <p>你好！<span class="userName" th:text="${loginName}+'       欢迎光临'">
                欢迎登录</span></p>
        </div>
<!--        空白区域-->
        <div style="width: 50px;height: 50px"></div>
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <!-- {include file="common/menu" /}-->
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;" class="site-demo-active">租凭管理</a>
                    <dl class="layui-nav-child">
                    <a data-url="/page/customer/list.do" data-id="1"
                       data-title="客户管理" th:text="客户管理" class="site-demo-active"
                       href="javascript:;"
                       data-type="tabAdd('客户管理','url','1')"
                    ></a>
                        <dd><a data-url=""
                               data-id="1" data-title="车辆管理" href="javascript:;"
                               class="site-demo-active" data-type="tabAdd('车辆管理','url','1')">车辆管理</a></dd>
                        <dd><a data-url=""
                               data-id="3" data-title="出租记录"
                               href="javascript:;" class="site-demo-active"
                               data-type="tabAdd('出租记录','url','3')">出租记录</a></dd>
                        <dd><a  data-url=""
                            data-id="3" data-title="还车记录"
                            href="javascript:;" class="site-demo-active"
                            data-type="tabAdd('还车记录','url','4')"
                                >还车记录</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;" class="site-demo-active">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a data-url="/page/user/list.do"
                               data-id="6" data-title="用户管理"
                               href="javascript:;"
                               class="site-demo-active"
                               data-type="tabAdd('用户管理','url','5')"
                        >用户管理</a></dd>
                        <dd><a data-url="角色管理"
                               data-id="5" data-title="角色管理" href="javascript:;"
                               class="site-demo-active"
                               data-type="tabAdd('角色管理','url','7')">角色管理</a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 {__CONTENT__}-->
        <div>
            <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 0px;margin-top: 0px;">
                <ul class="layui-tab-title">
                </ul>
                <ul class="rightmenu" style="display: none;position: absolute;">
                    <li data-type="closethis">关闭当前</li>
                    <li data-type="closeall">关闭所有</li>
                </ul>
                <div class="layui-tab-content">

                </div>
            </div>

            <div class="site-demo-button" style="margin-bottom: 0;">

            </div>

        </div>

    </div>

    <script th:inline="none">
        //JavaScript代码区域
        layui.use('element', function(){
            var $ = layui.jquery
            var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

            //触发事件
            var active = {
                tabAdd: function(url,id,name){
                    //新增一个Tab项
                    //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                    //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                    element.tabAdd('demo', {
                        title: name,
                        content: '<iframe data-frameid="'+id+'" frameborder="0" src="'+url+'" style="width:100%;"></iframe>',
                        id: id //规定好的id
                    })
                    //element.render('tab');
                    FrameWH();  //计算ifram层的大小
                },
                tabChange: function(id) {
                    //切换到指定Tab项
                    element.tabChange('demo', id); //根据传入的id传入到指定的tab项
                },
                tabDelete: function (id) {
                    element.tabDelete("demo", id);//删除
                }

            };


            //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
            $('.site-demo-active').on('click', function() {
                var dataid = $(this);

                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在

                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
                    }
                }
                //最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-id"));

            });

            function FrameWH() {
                var h = $(window).height() -41- 10 - 60 -10-44 -10;
                $("iframe").css("height", h + "px");
            }

            $(window).resize(function () {
                FrameWH();
            })
        });

    </script>

    <div class="layui-footer" style="text-align: center;">
        <!-- 底部固定区域 -->
        © zip.com - 版权说明
    </div>

</div>
</body>
</html>